<template>
<div id="app">
    <!---->
    <div data-v-63778285="" class="app">
      <template v-if="!isSearch">
        <swipe class="my-swipe" v-if="isShowBanner">
          <swipe-item :class="getSlideClass(idx)" v-for="(bannerItem, idx) in bannerInfo" :key="idx">
            <a :href="getJumpUrl('banner', bannerItem)">
              <img :src="bannerItem.bannerUrl" alt="">
            </a>
          </swipe-item>
        </swipe>
      </template>
      <div class="van-pull-refresh">
          <div class="van-pull-refresh__track" style="transition: 0ms;">
            <div class="van-pull-refresh__head"></div>
            <div class="content hasBanner">
              <div class="content-top" v-if="!isSearch">
                <a href="https://mall.xiangtuan.xyz/#/forcast?refSpm=2.9.0.0&shopId=ti7BNtxVjZ&sourceUrl=true">
                  <div class="tit">
                    <h3>精选预告</h3>
                    <div><span class="size3">即将开售</span><i
                        class="van-icon van-icon-arrow">
                        <!----></i></div>
                  </div>
                  <div class="con">
                    <div class="box" v-for="advanceItem in advanceList" :key="advanceItem.activityNo">
                      <div
                        :data-src="advanceItem.brandLogoUrl"
                        lazy="loaded"
                        :style="{'background-image': `url(${advanceItem.brandLogoUrl})`}">
                      </div>
                    </div>
                    <div class="box">
                      <div class="symbol">···</div>
                    </div>
                  </div>
                </a>
              </div>

              <div v-infinite-scroll="loadMore" infinite-scroll-disabled="isLock" infinite-scroll-distance="10" infinite-scroll-immediate-check="true" infinite-scroll-throttle-delay="200">
                <template v-if="!isSearch">
                  <div class="DropdownMenu--wrap">
                    <div class="sortBy">
                      <div :class="[sortNum ==='multiple' ? 'sortActive sortBtn': 'sortBtn']">
                        <span @click="sortTo('multiple')">综合</span>
                      </div>
                      <div :class="[sortNum ==='sale' ? 'sortActive sortBtn': 'sortBtn']">
                        <a href="javascript:void(0)" @click="sortTo('sale')">销量
                          <i :class="[(!isAsc && sortNum ==='sale') ? 'angle_top on' : 'angle_top']"></i>
                          <i :class="[(isAsc && sortNum ==='sale') ? 'angle_bottom on' : 'angle_bottom']"></i>
                        </a>
                      </div>
                      <div :class="[sortNum ==='new' ? 'sortActive sortBtn': 'sortBtn']">
                        <a href="javascript:void(0)" @click="sortTo('new')">上新
                          <i :class="[(!isAsc && sortNum ==='new') ? 'angle_top on' : 'angle_top']"></i>
                          <i :class="[(isAsc && sortNum ==='new') ? 'angle_bottom on' : 'angle_bottom']"></i>
                        </a>
                      </div>
                    </div>
                    <div class="DropdownMenu__wrap" :style='getMinHeight'>
                      <ul class="wrap__box" style="background-color: rgb(255, 255, 255);" v-show="isShowContent">
                        <li v-for="(brandItem, ii) in pageData" :key="getKey(brandItem.activityNo)">
                          <div class="wrap__item">
                            <div class="item__top">
                              <a :href="getJumpUrl('brand', brandItem)">
                                <div>
                                  <img :src="brandItem.brandLogoUrl" />
                                </div>
                                <div>
                                  <h5 class="size4">{{brandItem.brandName}}</h5>
                                  <p><span class="size3">{{brandItem.onlineProductCount}}款</span></p>
                                </div>
                                <div>
                                  进入会场
                                </div>
                              </a>
                            </div>
                            <div class="item_box">
                              <div>
                                <ul class="ul__li" :style='getBoxWidth(brandItem.productList.length)'>
                                  <li v-for="productItem in brandItem.productList" :key="getKey(productItem.productNo)" :style="getItemHeight">
                                    <a :href="getJumpUrl('product', {'product': productItem, 'brand':brandItem})">
                                      <template v-if="getNoLazy(ii)">
                                        <img :src="productItem.productPicUrl" :style="getImgWidth" />
                                      </template>
                                      <template v-else>
                                        <img v-lazy="productItem.productPicUrl" :key="productItem.productNo" :style="getImgWidth" />
                                      </template>
                                      <p class="size3">{{productItem.productName}}</p>
                                      <p><b class="size2">￥</b><b class="size4">{{productItem.price}}</b><s class="size2">￥ {{productItem.tagPrice}}</s></p>
                                    </a>
                                  </li>
                                </ul>
                              </div>
                            </div>
                            <!-- <p><a :href="getJumpUrl('brand', brandItem)">距离活动结束<b>02</b>天<b>11</b>时<b>14</b>分</a></p> -->
                            <p>
                              <a :href="getJumpUrl('brand', brandItem)">
                                <count-down
                                  v-on:start_callback="countDownS_cb(1)"
                                  v-on:end_callback="countDownE_cb(1)"
                                  :currentTime="getTimeUnit(true)"
                                  :startTime="getTimeUnit(false, brandItem.beginTime)"
                                  :endTime="getTimeUnit(false, brandItem.endTime)"
                                  :tipText="'距离开始文字1'"
                                  :tipTextEnd="'距离结束文字1'"
                                  :endText="'活动已结束'"
                                  :dayTxt="'天'"
                                  :hourTxt="'时'"
                                  :minutesTxt="'分'"
                                  :secondsTxt="'秒'">
                                </count-down>
                              </a>
                            </p>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </template>

                <template v-else>
                  <div class="search-box">
                    <div v-if="nonSearch">
                      <div class="non-search">暂未搜索到相关内容</div>
                      <div v-if="recommendData.length">
                        <div class="recommendTips">
                          <h5>热卖品牌<button @click="reload">查看更多 &gt;</button></h5>
                        </div>
                        <div class="DropdownMenu__wrap" :style='getMinHeight'>
                          <ul class="wrap__box" style="background-color: rgb(255, 255, 255);">
                            <li v-for="(brandItem, ii) in recommendData" :key="getKey(brandItem.activityNo)">
                              <div class="wrap__item">
                                <div class="item__top">
                                  <a :href="getJumpUrl('brand', brandItem)">
                                    <div>
                                      <img :src="brandItem.brandLogoUrl" />
                                    </div>
                                    <div>
                                      <h5 class="size4">{{brandItem.brandName}}</h5>
                                      <p><span class="size3">{{brandItem.onlineProductCount}}款</span></p>
                                    </div>
                                    <div>
                                      进入会场
                                    </div>
                                  </a>
                                </div>
                                <div class="item_box">
                                  <div>
                                    <ul class="ul__li" :style='getBoxWidth(brandItem.productList.length)'>
                                      <li v-for="productItem in brandItem.productList" :key="getKey(productItem.productNo)" :style="getItemHeight">
                                        <a :href="getJumpUrl('product', {'product': productItem, 'brand':brandItem})">
                                          <template v-if="getNoLazy(ii)">
                                            <img :src="getFirstImg(productItem.productPicUrl)" :style="getImgWidth" />
                                          </template>
                                          <template v-else>
                                            <img v-lazy="getFirstImg(productItem.productPicUrl)" :key="productItem.productNo" :style="getImgWidth" />
                                          </template>
                                          <p class="size3">{{productItem.productName}}</p>
                                          <p><b class="size2">￥</b><b class="size4">{{productItem.price}}</b><s class="size2">￥ {{productItem.tagPrice}}</s></p>
                                        </a>
                                      </li>
                                    </ul>
                                  </div>
                                </div>
                                <!-- <p><a :href="getJumpUrl('brand', brandItem)">距离活动结束<b>02</b>天<b>11</b>时<b>14</b>分</a></p> -->
                                <p>
                                  <a :href="getJumpUrl('brand', brandItem)">
                                    <count-down
                                      v-on:start_callback="countDownS_cb(1)"
                                      v-on:end_callback="countDownE_cb(1)"
                                      :currentTime="getTimeUnit(true)"
                                      :startTime="getTimeUnit(false, brandItem.beginTimeMs, true)"
                                      :endTime="getTimeUnit(false, brandItem.endTimeMs, true)"
                                      :tipText="'距离开始文字1'"
                                      :tipTextEnd="'距离结束文字1'"
                                      :endText="'活动已结束'"
                                      :dayTxt="'天'"
                                      :hourTxt="'时'"
                                      :minutesTxt="'分'"
                                      :secondsTxt="'秒'">
                                    </count-down>
                                  </a>
                                </p>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    
                    <div v-else>
                      <div class="search-tips">搜索到相关商品共 {{rowCount}} 个</div>
                      <div class="search-result">
                        <ul>
                          <li v-for="(searchItem, jj) in searchData" :key="getKey(searchItem.externalProductCode)">
                            <a :href="getJumpUrl('search', searchItem)">
                              <template v-if="getNoLazy(jj)">
                                <img :src="getFirstImg(searchItem.pictureUrls)" />
                              </template>
                              <template v-else>
                                <img v-lazy="getFirstImg(searchItem.pictureUrls)" :key="searchItem.productNo" />
                              </template>
                              <p class="size3">{{searchItem.name}}</p>
                              <p><b class="size2">￥</b><b class="size4">{{searchItem.price}}</b><s class="size2">￥ {{searchItem.tagPrice}}</s></p>
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </template>
                
                <div class="van-list" style="margin-bottom: 50px;" v-if="isShowAll">
                  <div class="van-list__finished-text">好东西就到这里啦~</div>
                </div>
              </div>

            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
  import $ from 'jquery'
  import CountDown from './countDown'
  import axios from 'axios'
  let localActivityData = require('../../../../mock/activityData.json')

  export default {
    name: 'login',
    props: ['tabData', 'activeTab', 'searchTxt'],
    components: {
      CountDown
    },

    data () {
      return {
        bannerInfo: [],
        isShowBanner: false,
        showContent: false,
        activityPage: {},
        dataList: {},
        advanceList: [], // 精选预告
        typeList: [], // 假数据容器
        realList: [], // 真实数据容器
        totalPage: 0, // 总页数
        pageno: 1, // 当前页数
        distance: 10, // 滚动条距离底部的距离,
        pageData: [], // 显示数据
        rowCount: 0, // 总条数
        isShowAll: false, // 是否已加载全部，下拉不刷新
        isReal: true, // 是否真实接口返回
        isLock: false, // 下拉刷新数据，加锁
        tabNo: 0,
        timer: null,
        sortedType: 2,
        sortedModel: '1',
        lastSortNum: 'multiple',
        sortNum: 'multiple',
        isAsc: true, // 是否升序
        searchStr: '',
        isSearch: false,
        nonSearch: false,
        searchData: [], // 相似产品
        recommendData: [] // 推荐产品
      }
    },

    computed: {
      getMinHeight () {
        return {
          'min-height': $('.wrap__box li:first-child').height() * 10
        }
      },
      getItemHeight () {
        return {
          width: $(window).width() * 0.32 + 'px'
        }
      },
      getImgWidth () {
        return {
          width: $(window).width() * 0.32 + 'px',
          height: $(window).width() * 0.32 + 'px'
        }
      },
      isShowContent () {
        return this.pageData.length > 0
      }
    },

    created () {
      // this.getLocalJson()
      this.getAdvanceData()
      this.tabNo = this.activeTab
      if (this.tabData.bannerInfo) {
        this.bannerInfo = this.tabData.bannerInfo
        this.isShowBanner = this.bannerInfo.length > 0 || false
      } else {
        this.isShowBanner = false
      }
    },

    methods: {
      getNoLazy (curr) {
        return curr < 3
      },
      getSlideClass (val) {
        return `slide${val}`
      },
      getTimeUnit (isCurrTime, time, isformat = false) {
        // ios下不支持2019-03-12的日期格式
        if (isformat) {
          return +time
        } else {
          return isCurrTime ? Date.now() : Date.parse(time.replace(/-/g, '/'))
        }
      },
      getFirstImg (str) {
        return str.split(',')[0]
      },
      getJumpUrl (type, opts) {
        let fedUrl = 'https://mall.xiangtuan.xyz/api/member/auth?backUrl='
        if (type === 'brand') {
          return fedUrl + encodeURIComponent(`https://mall.xiangtuan.xyz/#/brand?activityNo=${opts.activityNo}&fromPage=index&refSpm=2.11.12.13&shopId=ti7BNtxVjZ&sourceUrl=true&replace=1`)
        } else if (type === 'product') {
          return fedUrl + encodeURIComponent(`https://mall.xiangtuan.xyz/#/productDetail?refSpm=2.11.12.21&productId=${opts.product.productNo}&activityNo=${opts.brand.activityNo}&shopId=ti7BNtxVjZ&sourceUrl=true&replace=1`)
        } else if (type === 'search') {
          return fedUrl + encodeURIComponent(`https://mall.xiangtuan.xyz/#/productDetail?refSpm=2.11.12.21&productId=${opts.productNo}&activityNo=${opts.activityNo}&shopId=ti7BNtxVjZ&sourceUrl=true&replace=1`)
          // return fedUrl + encodeURIComponent(`https://mall.xiangtuan.xyz/api/product/auth/ti7BNtxVjZ/${opts.productNo}/${opts.activityNo}?channel=h5Mall&ud=vXp3Zw4hcT&ut=c&t=1570105900`)
        } else {
          return fedUrl + encodeURIComponent(`https://mall.xiangtuan.xyz/#/${opts.jumpUrl}?conferenceId=${opts.conferenceId}&type=1&activityTagNo=${opts.activityTagNo}&shopId=ti7BNtxVjZ&sourceUrl=true`)
        }
      },
      getKey (val) {
        return val + Date.now() + parseInt(Math.random() * 1000)
      },
      getBoxWidth (len) {
        let itemBannerW = $(window).width() * 0.32
        return {
          width: itemBannerW * len + $(window).width() * 0.03 * len + 'px'
        }
      },
      countDownS_cb: function (x) {
        // console.log(x)
      },
      countDownE_cb: function (x) {
        // console.log(x)
      },
      sortTo (val) {
        this.sortNum = val
        if (val === 'sale') {
          this.sortedModel = '3'
          this.sortedType = this.isAsc ? 1 : 2
          if (this.lastSortNum === this.sortNum) {
            this.isAsc = !this.isAsc
          } else {
            this.isAsc = false
            this.lastSortNum = this.sortNum
          }
        } else if (val === 'new') {
          this.sortedModel = '2'
          this.sortedType = this.isAsc ? 1 : 2
          if (this.lastSortNum === this.sortNum) {
            this.isAsc = !this.isAsc
          } else {
            this.isAsc = false
            this.lastSortNum = this.sortNum
          }
        } else {
          this.sortedType = 2
          this.sortedModel = '1'
          this.isAsc = false
          this.lastSortNum = this.sortNum
        }
        this.loadMore(1)
      },
      loadMore (val) {
        // console.log(this.tabData, this.tabData.activityTagNo, this.pageno, 'isSearch: ' + this.isSearch)
        if (this.tabData && this.tabData.activityTagNo && this.pageno) {
          if (val) {
            this.pageno = val
          } else {
            this.pageno += 1
          }
          if (this.isSearch) {
            this.getSearchData()
          } else {
            this.getNextPage()
          }
          this.$emit('loadingStatus', true)
          this.recommendData = []
        }
      },
      // 读取精选预告数据
      getAdvanceData () {
        axios.post('https://mall.xiangtuan.xyz/api/commodity/subscribe/queryPage/ti7BNtxVjZ', {
          'pageNum': 1,
          'pageSize': 10,
          'activityTagNo': '2'
        }).then(res => {
          let datas = res.data && res.data.data
          if (datas) {
            let advanceList = datas.activityPage.list
            this.advanceList = advanceList.slice(0, 5)
          }
        })
      },
      /**
       * 模拟下一页
       * 真实数据下，切换下一页，请求接口
       * 假数据下，切换下一页，直接操作全部/指定长度的本地数据
       */
      getNextPage () {
        this.isLock = true
        return this.$http.post('https://api.golden-unique.com/v1/goods/lists', {
          'pageNum': this.pageno,
          'pageSize': 10,
          'activityTagNo': this.tabData.activityTagNo,
          'sortedType': this.sortedType,
          'sortedModel': this.sortedModel
        }).then((res) => {
          this.typeList = [] // 清除假数据
          let datas = res.data && res.data.data
          this.activityPage = datas.activityPage
          if (datas && this.activityPage) {
            // 真实数据，追加到原来的数组
            this.activityPage.list.map(item => {
              this.pageData.push(item)
            })
            this.rowCount = this.activityPage.rowCount
            this.totalPage = this.activityPage.totalPage
            if (this.pageno === this.totalPage) {
              this.isShowAll = true
              this.isLock = true
            } else {
              this.$nextTick(() => {
                // this.pageno += 1
                this.isLock = false
              })
            }
          } else {
            this.isShowAll = true
          }
          this.$emit('loadingStatus', false)
        }, () => {
          if (this.pageData.length && !this.typeList.length) {
            this.isShowAll = true
          } else {
            // 接口异常，且当前页没有数据，则请求本地数据
            this.getLocalContent()
            this.isShowAll = true
          }
          this.$emit('loadingStatus', false)
        })
      },
      /**
       * 搜索结果
       */
      getSearchData () {
        this.isLock = true
        this.nonSearch = false
        return axios.get('https://api.golden-unique.com/v1/goods/search', {
        // return axios.get('/ruei/getLikeData', {
        // return axios.get('/ruei/getRecommendData', {
          params: {
            'pageNum': this.pageno,
            'pageSize': 10,
            'search': this.searchStr
          }
        }).then((res) => {
          this.typeList = [] // 清除假数据
          const datas = res.data && res.data.data
          const resultData = datas.productPage // 相似产品
          const recommendData = datas.recommendActivityList // 推荐产品
          if (datas && resultData) {
            // 真实数据，追加到原来的数组
            resultData.data.map(item => {
              this.searchData.push(item)
            })
            this.rowCount = resultData.total
            this.totalPage = resultData.totalPage
            if (this.pageno === this.totalPage) {
              this.isShowAll = true
              this.isLock = true
            } else {
              this.$nextTick(() => {
                // this.pageno += 1
                this.isLock = false
              })
            }
          } else if (datas && recommendData) {
            // 真实数据，追加到原来的数组
            this.nonSearch = true
            this.recommendData = recommendData
            this.isShowAll = true
            this.isLock = true
          } else {
            // 搜索没有数据
            this.nonSearch = true
            this.isLock = true
            this.isShowAll = true
          }
          this.$emit('loadingStatus', false)
        }, () => {
          this.nonSearch = true
          this.isShowAll = true
          this.isLock = true
          this.$emit('loadingStatus', false)
        })
      },
      shuffle (arr) {
        for (var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x) {
          return arr
        }
      },
      // 栏目内容弄接口错误时，读取本地数据
      getLocalContent (opts) {
        this.activityPage = localActivityData.data.activityPage
        // 假数据，tab="全部"，操作的数据是全部；反之，操作的是指定长度15的假数据
        this.dataList = this.shuffle(this.activityPage.list)
        if (this.activeTab === 0) {
          this.typeList = this.dataList.slice(0)
        } else {
          let random = parseInt(Math.random() * 10)
          this.typeList = this.dataList.slice(random, random + 15)
        }
        this.rowCount = this.typeList.length
        // this.totalPage = this.rowCount % 10 === 0 ? (this.rowCount / 10) : (parseInt(this.rowCount / 10) + 1)

        // if (this.pageno < this.totalPage) {
        //   this.pageData = this.typeList.slice(0, this.pageno * 10)
        // } else {
        //   this.pageData = this.typeList.slice(0, this.rowCount)
        // }
        this.pageData = this.typeList.slice(0, this.rowCount)
        // this.isLock = false
        // this.pageno += 1
      },
      // 调试接口
      /**
       * webpack-server启动，模拟接口请求本地json数据
       */
      getLocalJson () {
        this.$http.get(`/ruei/getTabData`)
          .then(response => response.body)
          .then(res => {
            this.vanTabs = res.data
          })

        this.$http.get(`/ruei/getActivityData`)
          .then(response => response.body)
          .then(res => {
            this.activityPage = res.data.activityPage
            // 根据不同的子栏目随机产生数据
            this.dataList = this.shuffle(this.activityPage.list)
            this.showTabs(0)
          })
      },
      reload () {
        this.$emit('reload', 0)
      }
    },
    watch: {
      tabData: {
        handler (value) {
          if (this.tabData.bannerInfo) {
            this.bannerInfo = this.tabData.bannerInfo
            this.isShowBanner = this.bannerInfo.length > 0 || false
          } else {
            this.isShowBanner = false
          }
          this.pageData = []
          this.searchData = []
          this.isSearch = false
          this.loadMore(1)
        },
        deep: true
      },
      activeTab (val) {
        this.tabNo = val
      },
      searchTxt (val) {
        let str = val.replace(/(^\s*)|(\s*$)/g, '')
        if (str) {
          this.searchStr = val
          this.isSearch = true
        } else {
          this.searchStr = ''
          this.isSearch = false
        }
        this.pageData = []
        this.searchData = []
        this.loadMore(1)
      }
    }
  }
</script>

<style lang='less' scoped>
  .DropdownMenu--wrap {
    background: #fff;
    min-height: 500px;
  }
  .DropdownMenu__wrap, .wrap__box {
    height: 100%;
    min-height: 600px;
    & > li {
      min-height: 200px;
    }
  }
  .sortBy {
    display: flex;
    margin-bottom: 2vw;
    & > div {
      flex: 1;
      padding: 4vw 4vw 2vw;
      border-bottom: 1px solid #e5e5e5;
      span, a {
        font-size: 3.5vw;
      }
    }
    &:nth-of-type(1) span {
      display: block;
      overflow: hidden;
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
    .sortBtn {
      width: 100%;
      display: table-cell;
      position: relative;
      &.sortActive a, &.sortActive span {
        color: red;
      }
    }

    .sortBtn a {
      display: block;
      overflow: hidden;
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #5e5e5e;
    }

    .angle_top {
      content: '';
      width: 0;
      height: 0;
      display: block;
      border-style: solid;
      border-width: 0 4px 4px;
      border-color: transparent transparent #999;
      position: absolute;
      transform: rotate(180deg);
      bottom: 30%;
      right: 25%;
    }
    .sortActive .angle_top.on {
      border-color: transparent transparent red;
    }

    .angle_bottom {
      content: '';
      width: 0;
      height: 0;
      display: block;
      border-style: solid;
      border-width: 0 4px 4px;
      border-color: transparent transparent #999;
      position: absolute;
      top: 48%;
      right: 25%;
    }
    .sortActive .angle_bottom.on {
      border-color: transparent transparent red;
    }
  }
  .my-swipe {
    height: 150px;
    color: #fff;
    font-size: 30px;
    text-align: center;
    img {
      width: 100%;
    }
  }
  .search-box {
    background: #fff;
    // margin-top: 4vw;
    .search-tips {
      font-size: 4vw;
      padding: 4vw;
      border-bottom: 1px solid #e5e5e5;
      margin-bottom: 3vw;
    }
    .non-search {
      font-size: 4vw;
      text-align: center;
      padding: 6vw;
      border-bottom: 1px solid #e5e5e5;
      color: #999;
    }
    .recommendTips {
      h5 {
        padding: 4vw;
        font-size: 3vw;
        position: relative;
        left: 0;
        top: 0;
        button {
          background: none;
          font-size: 2.5vw;
          color: #999;
          border: none;
          position: absolute;
          right: 4vw;
          top: 4vw;
        }
      }
    }
  }
  .search-result {
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    ul li {
      width: 50%;
      a {
        width: 80%;
        margin: 0 auto;
      }
    }
    ul li img {
      border-radius: 1vw;
      display: block;
      width: 100%;
    }
    ul li:last-of-type(1) {
      margin-right: 0;
    }
    ul li p {
      margin: 2vw 0;
    }
    ul li p:nth-of-type(1) {
      // overflow: hidden;
      // white-space: nowrap;
      // text-overflow: ellipsis;
    }

    ul li p:nth-of-type(2) b {
      color: #e40f00;
    }

    ul li p:nth-of-type(2) s {
      color: #999;
      margin-left: 1vw;
    }
  }
</style>
